import React, { useState } from 'react'
import { Input, Button } from 'antd';
import './BaidutranslationList.css'
import axios from 'axios'

export default function BaidutranslationList() {
  const { TextArea } = Input;
  const [Text, setText] = useState('') // TextArea输入值
  const [Text1, setText1] = useState('') // 最终翻译结果
  const onChange = (e) => {
    setText(e.currentTarget.value)
  }
  const fanClick = () => {
    axios.get('https://api.vvhan.com/api/fy?text=' + Text).then(res => {
      setText1(res.data.data.fanyi);
    })
  }
  axios.get('https://api.vvhan.com/api/meihua')
  return (
    <div className='fanBox'>
      <div className='zBox'>
        <TextArea rows={12} placeholder="请输入" onChange={onChange} />
      </div>
      <div className='fBox'>
        <Button type="primary" onClick={() => fanClick()}>翻译</Button>
      </div>
      <div className='yBox'>
        {Text1}
      </div>
    </div>
  )
}

